<%- include("components/header", {type:'register'}) %>

<div id="fh5co-page">
	<div id="fh5co-main">
		<div class="container">
			<form class="form-signin" onsubmit="return false;">
				<label class="sr-only">用户名</label>
				<input type="text" name="name" class="form-control" placeholder="用户名" autofocus>
				<label class="sr-only">密码</label>
				<input type="password" name="password" class="form-control" placeholder="密码">
				<label class="sr-only">再次输入密码</label>
				<input type="password" name="repeatpass" class="form-control" placeholder="再次输入密码">
				<input type="hidden" id="avatorVal">
				<div class="uploadhead">
					<div class="btn btn-lg btn-primary btn-block">点击上传头像</div>
					<input class="file" type="file" name="avator" id="avator">
				</div>
				<img class="preview" alt="预览头像">
				<button class="btn btn-lg btn-primary btn-block submit">注册</button>
			</form>
		</div>
	</div>
</div>


<script>
	$(window).keyup(function (e) {
		if (e.keyCode == 13) {
			$('.submit').click()
		}
	})
	$('#avator').change(function(){
		if (this.files.length != 0) {
			var file = this.files[0],
				reader = new FileReader();
			if (!reader) {
				this.value = '';
				return;
			};
			console.log(file.size,file.type)
			// if (file.size >= 1024 * 1024 / 2) {
			// 	fade("请上传小于512kb的图片!")
			// 	return 
			// }
			if (!/image/g.test(file.type)) {
				fade("请上传图片文件!")
				$('#avatorVal').val('')
				$('form .preview').attr('src', '')
				$('form .preview').fadeOut()
				return 
			}
			reader.onload = function (e) {
				this.value = '';
				$('form .preview').attr('src', e.target.result)
				$('form .preview').fadeIn()
					var image = new Image();
					image.onload = function(){
						var canvas = document.createElement('canvas');
						var ctx = canvas.getContext("2d");
						canvas.width = 100;
						canvas.height = 100;
						ctx.clearRect(0, 0, 100, 100);
						ctx.drawImage(image, 0, 0, 100, 100);
						var blob = canvas.toDataURL("image/png");
						$('#avatorVal').val(blob)
					}
					image.src = e.target.result
			};
			reader.readAsDataURL(file);
		};
	})
	$('.submit').click(()=>{
		if ($('input[name=name]').val().trim() == '') {
			fade('请输入用户名！')
		}else if($('input[name=name]').val().match(/[<'">]/g)) {
			fade('请输入合法字符！')
		}else if($('input[name=password]').val().trim() == '') {
			fade('请输入密码！')
		}else if($('input[name=repeatpass]').val().trim() == '') {
			fade('请再次输入密码！')
		}else if($('input[name=password]').val() != $('input[name=repeatpass]').val()) {
			fade('密码输入不一致，请重新输入！')
		}else if($('#avatorVal').val() == ''){
			fade('请上传头像！')
		}else{
			$.ajax({
				url: "/register",
				data: {
					name: $('input[name=name]').val(),
					password: $('input[name=password]').val(),
					repeatpass: $('input[name=repeatpass]').val(),
					avator: $('#avatorVal').val(),
				},
				type: "POST",
				cache: false,
				dataType: 'json',
				success: function (res) {
					if (res.data == 1) {           		
						$('input[name=name]').val('')
						fade('用户名存在')
					}
					else if (res.data == 2){
						fade('请输入重复的密码')	               		
					}
					else if(res.data == 3){
						fade('注册成功')
						setTimeout(()=>{
							window.location.href = "/login"	  
						},2000)
					} else if (res.data == 4) {
						fade('头像上传失败')
					}
				},
				error: function () {
					fade('请求出错！')
				}
			})			
		}
	})
</script>
    
<%- include("components/footer") %>

	
